<template>
  <el-popover
    :show-after="500"
    placement="left-start"
    title="组合信息"
    width="30%"
    @show="open"
  >
    <template #reference>
      <span>
        <div
          class="bg-[#E50113] text-white text-[12px] w-[28px] h-[28px] leading-[28px] rounded-full text-center cursor-pointer"
          v-if="data.is_combination == 1"
        >
          {{
            data.combined_sources == 1
              ? "开发"
              : data.combined_sources == 2
              ? "销售"
              : data.combined_sources == 3
              ? "拆包"
              : "组合"
          }}
        </div>
      </span>
    </template>
    <div class="dialog-content">
      <div class="absolute top-3 right-3">
        组合类型:
        {{
          data.combined_sources == 1
            ? "开发组合"
            : data.combined_sources == 2
            ? "销售组合"
            : data.combined_sources == 3
            ? "拆包组合"
            : "无"
        }}
      </div>
      <el-table ref="tableRef" :data="tableData" border style="width: 100%">
        <el-table-column label="子SKU">
          <template #default="{ row }">
            <span>{{ row.goods_sku?.sku }}</span>
          </template>
        </el-table-column>
        <el-table-column label="子SKU中文名">
          <template #default="{ row }">
            <span>{{ row.goods_sku?.sku_cn_title }}</span>
          </template>
        </el-table-column>
        <el-table-column label="组成量">
          <template #default="{ row }">
            <span>{{ row.quantity }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <template #footer>
      <el-button @click="close">关闭</el-button>
    </template>
  </el-popover>
</template>
<script setup name="childCombination">
import { ElMessage } from "element-plus";
import { getCombinationSKUChildDetail } from "./api.js";
const visible = ref(false);
const options = ref([]);

const props = defineProps({
  data: {
    type: Object,
    default: () => {
      return {};
    },
  },
});

const { data } = toRefs(props);

const tableData = ref([]);

const open = () => {
  getDetails({ sku_id: data.value.id });
  visible.value = true;
};

const getDetails = async (form) => {
  try {
    const res = await getCombinationSKUChildDetail(form);
    tableData.value = res.data;
  } catch (e) {
    throw Error(e);
  }
};

const close = () => {
  visible.value = false;
};
defineExpose({ open });
</script>
